import React from 'react';
import { LockOutlined, UserOutlined} from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, message } from 'antd';
import './myLogin.scss';
import axios from 'axios';
import { useNavigate } from 'react-router';
import ajax, { adminLoginFn } from '../../utils/request';
import { changeUserInfo } from '../../store/modules/user'
import { useDispatch } from 'react-redux';
import { loginFn } from '../../api/userLogin';
import { changePath } from '../../store/modules/app';
function MyLogin() {
  const router = useNavigate()
  const dis = useDispatch()
  //登录按钮点击事件 admin 123456
  const onFinish = (formData) => {
    // console.log(formData);
    // 必须要封装
    // adminLoginFn(formData).then(res => {
    //   console.log(res);
    //   if (res.data.code == 200) {
    //     dis(changeUserInfo(res.data.data))
    //     // 跳转至首页
    //     router('/')
    //   }
    // })

    //     ajax({url:'/admin/login',method:'post',data:formData}).then(res=>{ 
    //       if(res.data.code==200){
    //         dis(changeUserInfo(res.data.data))
    //         router('/')
    //       }else{
    //         console.log(res.data.message);
    //       }
    // })
    // 三次封装
    loginFn(formData).then(res => {
      if (res.code == 200) {
        message.success('恭喜登录成功💐')
        dis(changeUserInfo(res.data))
        router('/')
        // 默认打开和选择侧边栏
        dis(changePath({
            defaultOpenKeys: '/',
            defaultSelectedKeys: 'home'
        }))
        // loginSuccessFn(res.message);
        // setTimeout(() => {
        //   dis(changeUserInfo(res.data));
        //   router('/');
        //   dis(changePath({
        //     defaultOpenKeys:"/",
        //     defaultSelectedKeys:"home"
        //   }))
        // }, 1000); // 延迟1秒跳转
      } else {
        // 提示错误信息
        message.error(res.message)
        // 用message
        console.log(res.message);

      }
    })

  };
  return (
    <div className='bg'>
      <Form
        className='login'
        name="login"
        initialValues={{ remember: true }}
        style={{ maxWidth: 360 }}
        onFinish={onFinish}
      >
        <Form.Item
          name="adminname"
          rules={[{ type: 'string', required: true, message: '管理员账号至少1位!', min: 1 }]}
        >
          <Input prefix={<UserOutlined />} allowClear

            placeholder="管理员账号" />
        </Form.Item>
        {/* 正则 pattern:/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/ */}
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入至少1个大写，一个小写，一个数字，一个特殊字符!', }]}
        >
          <Input.Password prefix={<LockOutlined />} type="password" placeholder="管理员密码" />
        </Form.Item>
        <Form.Item>
          <Flex justify="space-between" align="center">
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <a href="">忘记密码</a>
          </Flex>
        </Form.Item>

        <Form.Item>
          <Button block type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default MyLogin;